import React, {PureComponent} from 'react'
import {View, StyleSheet, FlatList, Text, Dimensions, DeviceEventEmitter} from 'react-native'
import SelectOpenClassCell from '../../widget/select/SelectOpenClassCell'
import RefreshListView, {RefreshState} from "react-native-refresh-list-view";
import api from "../../api/api";
import CourseDetailScene from '../detail/CourseDetailScene'
import method  from '../../api/method'
import NetTool  from '../../api/NetTool'
import SelectOpenSubjectScrollTab from '../../widget/select/SelectOpenSubjectScrollTab'
import Tips from "react-native-root-tips";
import EmptyCouponView from "../../widget/CommonEmptyView";

const {width, height} = Dimensions.get('window')

type Props = {
    navigation:any,
}

type State = {
    data: Array<Object>,
    refreshState: number,
}

export default class OpenCourseScene extends PureComponent<State,Props> {

    constructor(props) {
        super(props)
        this.state = {
            data: [],
            refreshState: RefreshState.Idle,
            course_index: 0,
            subject: '',
            select_grade: 'primary_1',
        }
    }

// life cycle
    componentDidMount() {
        let params = {
            subject: '',
            grade: 'primary_1',
            is_common: 1,
        }
        this.requestFirstPage(params)

        this.opensubjectEmitter = DeviceEventEmitter.addListener('opensubject', (item) => {
            let params = {
                subject: item,
                grade: this.state.select_grade,
                is_common: 1,
            }
            this.setState({subject: item.subject})
            this.requestFirstPage(params)
        });
        this.openGradeEmitter = DeviceEventEmitter.addListener('grade', (item) => {
            let params = {
                subject: item.subject,
                grade: item.grade,
                is_common: 1,
            }
            this.setState({subject: item.subject, select_grade: item.grade, course_index: 0})
            this.requestFirstPage(params)
        });
        DeviceEventEmitter.addListener('loginIn', (args) => {
            let params = {
                subject: this.state.subject,
                grade: this.state.select_grade,
                is_common: 1,
            }
            this.requestFirstPage(params)
        });
        DeviceEventEmitter.addListener('loginOut', () => {
            let params = {
                subject: this.state.subject,
                grade: this.state.select_grade,
                is_common: 1,
            }
            this.requestFirstPage(params)
        });
    }

    componentWillUnmount() {
        this.openGradeEmitter.remove();
        this.opensubjectEmitter.remove();
    }

    selectCourseTab(item) {
        this.setState({course_index: item})
    }

    render() {

        return (
            <View>
                <SelectOpenSubjectScrollTab callbackSelect={(item)=>{this.selectCourseTab(item)}}
                                            index={this.state.course_index} subjects={['全部','数学','语文','英语']}/>
                <View style={styles.container}>

                    <RefreshListView
                        ListHeaderComponent={() => (
                    !this.state.data.length?
                    <EmptyCouponView height={(height-200)} tip={'没有找到相关公开课'} source={require('../../../res/img/select/kecheng.png')}/>
                     : null)
                    }
                        numColumns={2}
                        data={this.state.data}
                        renderItem={this.renderCell}
                        keyExtractor={this.keyExtractor}
                        refreshState={this.state.refreshState}
                        onHeaderRefresh={()=>{this.requestFirstPage({
                            subject:this.state.subject,
                            grade:this.state.select_grade,
                            is_common:1,
                        })}}
                        onFooterRefresh={this.requestNextPage}
                    />

                </View>
            </View>

        )
    }

    //custon ui
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }
    renderCell = (rowData: any) => {
        return (
            <SelectOpenClassCell
                info={rowData.item}
                onPress={this.onCellSelected}
            />
        )
    }
    //reponse event
    clickComponentOpenCourseDetail(item) {
        alert(item)
    }

    onCellSelected = (info: Object) => {

        this.props.navigation.navigate('CourseDetailScene', {type: 1, info: info})
    }
//    请求数据
    requestData = async(params) => {

        let json = await NetTool.fetchGetRequest(api.getCourseList, method.get, params)

        let dataList = json.courses.map((info) => {
            return {
                id: info.id,
                title: info.title,
                start_date: info.start_date,
                end_date: info.end_date,
                remains: info.remains,
                price: info.price,
                zhu_teacher: info.teachers[0],
                fu_teacher: info.teachers[1],
                banner: info.banner,
                tag: info.tag,
                is_buy: false,
                buys:info.buys,
                totals:info.totals,
            }
        })

        return dataList
    }

    requestFirstPage = async(params) => {

        try {
            this.setState({refreshState: RefreshState.HeaderRefreshing})
            let dataList = await this.requestData(params)

            this.setState({
                data: dataList,
                refreshState: RefreshState.Idle,
            })
        } catch (error) {
            this.setState({
                refreshState: RefreshState.Failure,
            })
        }
    }
    requestNextPage = async() => {

    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
        paddingTop: 15,
        paddingBottom: 15,
        paddingLeft: 2,
        paddingRight: 12,
        width: width,
    },
})